package myJs.data.detailInfo

import myJs.api.Api
import shared.pojo.Data.DataInfo
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import com.softwaremill.quicklens._
import japgolly.scalajs.react.React.Fragment
import myJs.tool.Tool
import japgolly.scalajs.react._
import myJs.myPkg.Hooks._
import japgolly.scalajs.react.vdom.all._
import myJs.Utils._

/** Created by yz on 3/11/2020
  */
object BasicCp {

  case class Props(id: String){
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    val (basicData, setBasicData) = useState(DataInfo())

    object FTool{

      def refreshBasicData={
        if(props.id.nonEmpty){
          Api.data.getById(props.id).flatMapSync { response =>
            setBasicData(response)
          }
        }else{
          setBasicData{x=>
            x.modify(_.snpNumber).setTo(Tool.getRsNumber)
          }.async
        }
        }


    }

    useEffect(
      {
        FTool.refreshBasicData
      },
      List()
    )

    Fragment(
      h4("Basic"),
      div(
        className := "row",
        div(
          className := "col-md-12 col-sm-12",
          div(
            className := "portlet-body",
            form(
              className := "form-horizontal",
              div(
                className := "form-body",
                div(
                  className := "row",
                  div(
                    className := "form-group",
                    label(className := "control-label col-md-2", "rs:"),
                    div(
                      className := "col-md-4",
                      p(className := "form-control-static", s"${basicData.snpNumber}")
                    )
                  )
                ),
                if(props.id.nonEmpty){
                  Fragment(
                    div(
                      className := "row",
                      div(
                        className := "form-group",
                        label(className := "control-label col-md-2", "Gene:"),
                        div(
                          className := "col-md-4",
                          p(className := "form-control-static", s"${basicData.gene}")
                        ),
                        label(className := "control-label col-md-2", "Related nutrients:"),
                        div(
                          className := "col-md-4",
                          p(className := "form-control-static", s"${basicData.nutrient}")
                        )
                      )
                    ),
                    div(
                      className := "row",
                      div(
                        className := "form-group",
                        label(className := "control-label col-md-2", "OR:"),
                        div(
                          className := "col-md-4",
                          p(className := "form-control-static", s"${basicData.or}")
                        ),
                        label(className := "control-label col-md-2", "P value:"),
                        div(
                          className := "col-md-4",
                          p(className := "form-control-static", s"${basicData.p}")
                        )
                      )
                    ),
                    div(
                      className := "row",
                      div(
                        className := "form-group",
                        label(className := "control-label col-md-2", "Article title:"),
                        div(
                          className := "col-md-4",
                          p(className := "form-control-static", s"${basicData.articleTitle}")
                        ),
                        label(className := "control-label col-md-2", "Articel DOI:"),
                        div(
                          className := "col-md-4",
                          p(className := "form-control-static", s"${basicData.articleDoi}")
                        )
                      )
                    )
                  )
                }else EmptyVdom,
              )
            )
          )
        )
      )
    )

  }

}
